長いリストを扱う

コンテンツ

標準ListViewコンストラクターはうまく機能します小さなリストの場合。を含むリストを操作するにはアイテム数が多い場合は、ListView.builderコンストラクタ。

デフォルトとは対照的にListViewコンストラクター、これには必要なものすべてのアイテムを一度に作成すると、ListView.builder()コンストラクタ画面上にスクロールすると項目が作成されます。

1. データソースを作成する

まず、データソースが必要です。たとえば、データソースメッセージ、検索結果、ストア内の製品のリストなどです。ほとんどの場合、このデータはインターネットまたはデータベースから取得されます。

この例では、次のコマンドを使用して 10,000 個の文字列のリストを生成します。List.generateコンストラクタ。

List<String>.generate(10000, (i) => 'Item $i'),

2. データソースをウィジェットに変換する

文字列のリストを表示するには、各文字列をウィジェットとしてレンダリングします。使用してListView.builder()。この例では、各文字列をそれぞれの行に表示します。

ListView.builder(
  itemCount: items.length,
  prototypeItem: ListTile(
    title: Text(items.first),
  ),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

インタラクティブな例

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(10000, (i) => 'Item $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    const title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

子供の程度

各項目の範囲を指定するには、次のいずれかを使用できますitemExtentまたprototypeItem。どちらかを指定すると、子に独自のエクステントを決定させるより効率的です。なぜなら、スクロール機構は子どもたちの予知能力を活用できるからです。範囲を指定して、スクロール位置が大幅に変更された場合などに作業を節約します。